<script setup>
import { ref } from 'vue'
// 时间范围
const timeRange = ref('')

// 测试数据
// 发射机数据
const transmitterData = [
    {
        polceTime: '2024-9-10 13:14:15',
        polceDevice: '发射机',
        transmitter: 'Tx1',
        model: 'JRS-953',
        location: '万倾沙',
        control: '本控',
        powerLevel: '全功率',
        paStatus: 'On',
        highVoltage: 'On',
        channel: 46,
        mode: 'SSBs',
        frequency: 12577.5,
        outputPower: 5602,
        pf: 4980,
        pr: 30,
        vswr: 1.16,
        epa: 120,
        ipa: 138,
        eac: 380,
        status: '报警'
    },   
]
// 接收机数据
const receiverData = [
    {
        polceTime: '2024-9-1 13:15:15',
        polceDevice: '接收机',
        receiver: 'Rx03',
        name: 'Rx3_DSC_6M',
        station: '1.万顷沙',
        control: '本控',
        power: '开',
        frequency: '6312.5',
        mode: 'FSK',
        bandwidth: '0.3',
        autoGain: 'Data',
        attenuator: '20dB',
        audioProcessor: '宽带',
        status: '报警',
}
]

// 展示的发射机数据
const showTransmitterData = ref([])
// 展示的接收机数据
const showReceiverData = ref([])

// 选择好时间
let timeArr = []
const onChange = (value) => {
    console.log(value[0]);
    timeArr = value
}
// 查找数据
const seekData = (a,b) => {
    if (a.length === 0) return ''
    a.forEach(ele => {
        let time = +new Date(ele.polceTime)
        if (time >= startTime && time <= endTime) {
            b.value.push(ele)
        }
    });
}
let startTime
let endTime
const selectTime = (timeArr,transmitterData = [],receiverData = []) => {
    showTransmitterData.value = []
    showReceiverData.value = []
    startTime = +new Date(timeArr[0])
    endTime = +new Date(timeArr[1])
    seekData(receiverData,showReceiverData)
    seekData(transmitterData,showTransmitterData)
}

// 输入的设备类型数据
const deviceType = ref  ('')
// 查询按钮
const onClick = () => {
    if (timeArr.length > 0 && deviceType.value !== '') {
        if (deviceType.value.includes('发射')) {
            selectTime(timeArr,transmitterData,[])
        } else if (deviceType.value.includes('接收')) {
            selectTime(timeArr,[],receiverData)
        }
    } else {
        if (deviceType.value !== '') {
            if (deviceType.value.includes('发射')) {
                showTransmitterData.value = transmitterData
            } else if (deviceType.value.includes('接收')) {
                showReceiverData.value = receiverData
            }
        }    
        if (timeArr.length > 0) selectTime(timeArr, receiverData, transmitterData)
    }
    
}
</script>

<template>
    <div class="content">
        <h2>报警查询</h2>
        <div class="main">
            <!-- 顶部 -->
            <div class="top">
                <div class="block">
                    <span>按时间查询：</span>
                    <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="onChange"
                    />
                </div>
                <div class="search">
                    <span>设备类型：</span>
                    <el-input class="inp" v-model="deviceType"></el-input>
                    <el-button type="primary" @click="onClick">查询</el-button>
                </div>
            </div>
            <!-- 底部展示数据 -->
            <div class="bottom">
                <p v-if="showTransmitterData.length <= 0 && showReceiverData.length <= 0">暂无报警信息</p>
                <div class="data" v-else>
                    <!-- 发射机报警信息 -->
                    <div class="transmitter" v-if="showTransmitterData.length > 0">
                        <span>发射机报警记录</span>
                        <el-table :data="showTransmitterData" height="250" style="width: 100%">
                            <el-table-column prop="transmitter" label="设备类型" width="120" />
                            <el-table-column prop="model" label="型号" width="130" />
                            <el-table-column prop="location" label="站点" width="200" />
                            <el-table-column prop="polceTime" label="报警时间" width="180" />
                            <el-table-column prop="control" label="遥控" width="90" />
                            <el-table-column prop="paStatus" label="高压" width="90" />
                            <el-table-column prop="channel" label="信道" width="90" />
                            <el-table-column prop="mode" label="模式" width="90" />
                            <el-table-column prop="powerLevel" label="功率等级" width="90" />
                            <el-table-column prop="status" label="状态" width="90" />
                        </el-table>
                    </div>
                    <!-- 接收机报警记录 -->
                    <div class="receiver" v-if="showReceiverData.length > 0">
                        <span>接收机报警记录</span>
                        <el-table :data="showReceiverData" height="250" style="width: 100%">
                            <el-table-column prop="receiver" label="设备类型" width="120" />
                            <el-table-column prop="name" label="型号" width="130" />
                            <el-table-column prop="station" label="站点" width="200" />
                            <el-table-column prop="polceTime" label="报警时间" width="180" />
                            <el-table-column prop="control" label="遥控" width="90" />
                            <el-table-column prop="power" label="电源" width="90" />
                            <el-table-column prop="frequency" label="频率" width="90" />
                            <el-table-column prop="mode" label="模式" width="85" />
                            <el-table-column prop="bandwidth" label="带宽" width="90" />
                            <el-table-column prop="autoGain" label="自动增益" width="100" />
                            <el-table-column prop="attenuator" label="衰减器" width="100" />
                            <el-table-column prop="audioProcessor" label="消音器" width="100" />
                            <el-table-column prop="status" label="状态" width="100">
                            <template v-slot="scope">
                                <span :style="{ color: scope.row.status === '报警' ? 'red' : '' }">
                                    {{ scope.row.status }}
                                </span>
                            </template>
                        </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.block {
    margin-right: 30px;
    text-align: center;
}
.main {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.data {
    padding: 20px 0;
}
.data span {
    font-weight: 700;
}
.top {
    display: flex;
}
.search {
    display: flex;
    align-items: center;
}
.search span {
    text-wrap: nowrap;
}
.bottom {
    height: 100%;
}
.inp {
    margin-right: 20px;
}
.bottom {
    /* min-height: 400px;
    line-height: 400px; */
    text-align: center;
    /* height: 100%; */
}
</style>